<template>
  <div :class="wrapClasses"
       :style="wrapStyles">
    <!--label-->
    <label :class="labelClasses"
           :for="elementId"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <!--清除按钮-->
    <i ref="clearIcon"
       :class="clearClasses"
       v-if="showClear"
       @click="handleClear($event)">
    </i>
    <!--图标-->
    <i ref="icon"
       :class="iconClasses"
       v-if="icon"
       @click="handleIconClick($event)">
    </i>
    <!--前面插入的部分-->
    <div :class="`aty-input-group-prepend`"
         v-if="$slots.prepend">
      <slot name="prepend"></slot>
    </div>
    <!--input-->
    <input ref="input"
           :id="elementId"
           :class="inputClasses"
           :style="inputStyles"
           v-bind:value="value"
           v-bind="inputAttrs"
           v-on="inputListeners" />
    <!--后面插入的部分-->
    <div ref="append"
         :class="`aty-input-group-append`"
         v-if="$slots.append">
      <slot name="append"></slot>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses"
         :style="errorTipStyles"
         v-if="isShowMessage">
      {{validateMessage}}
    </div>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
